@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

    body{
    font-family: "Raleway", serif;
    color: #000000;
    background-color: #e6d5b8;
    font-weight: 300;
    text-align: center;}

    
/*Menu de navegação*/
    nav a{
    margin: 0px 20px;
    text-decoration: none;
    color: #2f6131;
    font-weight:bold;
    font-size: 1rem;
    position: relative;}

    nav a:hover{
        color: #f2e6ce;}

    main{
    text-align: center;
    padding: 20px;}


#frase-de-efeito{
    color:#1e3a5f;
    font-weight:600;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-shadow: 0px 0px 2px #1e3a5f;
    text-align: center;
}
h1{
    color: #06032c;;
    font-size: 2rem;
    text-align: center;
}
.main-container{
    display:flex;   
}

.main-block{
    background-color: #264e865d;
    gap: 40px;
    max-width: 300px;
    margin: 0 auto;
    flex-wrap: wrap;
    border-radius: 30px;
    box-shadow: 0px 3px 3px rgba(17,43,15,0, 267);
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.main-block a{
    color:#f5e6c4;
    background:#162c4b5b;
    text-decoration: none;
    padding: 5px 5px;
    max-width: 150px;
    font-weight: 600;
    transition: all 0.5s;
    border-radius: 10px;
}

header{
    background: linear-gradient(to right, #a7c796, #a7c7e7);
    padding: 20px 0;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
    border-radius: 20px;
    box-shadow: 0px 3px 3px rgba(17,43,15,0, 267);
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
/*Perguntar porque não está mudando de cor*/
/*também perguntar como colocar o exercises em colunas*/
.main-container p{
    background:#041b33;
    color:#f5e1c8;
    padding: 5px;
    font-weight:500;
}

#topo{
    padding-top: 30px;}

#topo a{

    text-decoration: none;
    color:#f5e6c4;
}
#topo a:hover{
    color:#a7c7e7;
}
footer{
    background-color:#06032c;
    color:#f5e6c4;
    text-align: center;
    padding: 5px;
    font-weight: 500;
}
.main-container p{
    background: #9fa4a6;
  color: #f5e1c8;
  padding: 5px;
  font-weight: 600;
}
/*quando colocar a imagem
figure img{
width: 550;
height: auto;
border-radius: ;*/
*@media(max-width:100%;
figure img{
    max-width:100%;
    heigth:auto;
    border-radius: 5;
}
nav a:hover{
color: #e0871a;
}